<template>
  <div class="custom_page">
    <div class="content">
      <!-- 顶部搜索 -->
      <el-form :inline="true" :model="formParams">
        <el-form-item label="客户昵称">
          <el-input
            v-model="formParams.name"
            maxlength="20"
            placeholder="请输入客户昵称"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="formParams.phone"
            maxlength="11"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="formParams.labelId" placeholder="请选择">
            <el-option
              v-for="(item, index) in tipsList"
              :key="index"
              :label="item.labelName"
              :value="item.buyerLabelId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="最近消费时间">
          <el-date-picker
            v-model="formParams.dates"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-form-item label="累计消费金额">
            <el-input
              v-model="formParams.minMoney"
              maxlength="9"
              placeholder="请输入最小值"
            />
          </el-form-item>
          <el-form-item label="-">
            <el-input
              v-model="formParams.maxMoney"
              maxlength="9"
              placeholder="请输入最大值"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-form-item label="购买次数">
            <el-input
              v-model="formParams.minBuyers"
              maxlength="9"
              oninput="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入最小值"
            />
          </el-form-item>
          <el-form-item label="-">
            <el-input
              v-model="formParams.maxBuyers"
              maxlength="9"
              oninput="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入最大值"
            />
          </el-form-item>
        </el-form-item>

        <el-form-item label-width="0">
          <el-button type="primary" plain @click="search">查询</el-button>
          <el-button plain @click="clear">重置</el-button>
          <el-button
            type="primary"
            plain
            :loading="loading.export"
            @click="handleExport"
          >导出</el-button>
        </el-form-item>
      </el-form>
      <!--  表格 -->
      <div class="content_table">
        <div class="table">
          <el-table
            v-loading="loading.table"
            :data="tableData"
            border
            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
            style="width: 100%"
            class="dataTable"
          >
            <el-table-column prop="name" label="客户昵称" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column prop="memberLevelName" label="会员等级" />
            <el-table-column prop="total" label="消费总额" />
            <el-table-column prop="buyers" label="购买次数" />
            <el-table-column prop="credit" label="剩余积分" />
            <el-table-column prop="time" label="最近消费时间" />
            <el-table-column prop="createTime" label="注册时间" />
            <el-table-column
              :formatter="(row) => (row.registerIp ? row.registerIp : '-')"
              label="注册IP"
              show-overflow-tooltip
            />
            <el-table-column
              :formatter="(row) => (row.lastLoginIp ? row.lastLoginIp : '-')"
              prop="time"
              label="最后登录IP"
              show-overflow-tooltip
            />
            <el-table-column label="操作" fixed="right" width="160">
              <template #default="scope">
                <el-button
                  type="primary"
                  link
                  @click.native.prevent="details(scope.row)"
                >详情</el-button>
                <el-button
                  type="primary"
                  link
                  @click.native.prevent="addBlackList(scope.row)"
                >
                  {{ scope.row.ifBlack ? '取消黑名单' : '加入黑名单' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination
              :current-page="formParams.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="formParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              background
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- *************对话框开始************* -->
    <member-details ref="memberDetailsRef" @reset="reset" />
  </div>
</template>

<script setup>
import { ref, onBeforeMount, reactive } from 'vue'
import {
  customerMageGetAll,
  getLabels,
  customerBlacklist,
  exportBuyerUser,
} from '@/api/customerMage'
import memberDetails from './details.vue'


const memberDetailsRef = ref(null)
let loading = reactive({
  table: false,
  export: false,
})
const formParams = ref({
  name: '', // 用户昵称
  phone: '', // 手机号
  labelId: '', // 标签id
  dates: [], // 最近消费时间日期数组
  minMoney: '', // 累计消费金额最小值
  maxMoney: '', // 累计消费金额最大值
  minBuyers: '', // 购买次数最小值
  maxBuyers: '', // 购买次数最大值
  startTime: '', // 申请开始时间
  endTime: '', // 申请结束时间
  page: 1,
  pageSize: 10
})
const tipsForm = ref({
  labelName: ''
})
const total = ref(1)
const tableData = ref([])
const tipsList = ref([])
const checkList = ref([])
const addFormDialog = ref(false)
const buyerUserId = ref('') // 用户id

onBeforeMount(() => {
  getAll()
  getSelect({ labelName: '' })
})

/**
 * 导出
 */
function handleExport () {
  ElMessage({
    message: '数据导出中，请勿重复操作！',
    type: 'success',
  })
  loading.export = true
  exportBuyerUser(formParams.value).then(res => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    const fileName = '用户列表.xls'
    if ('download' in document.createElement('a')) {
      // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.href = URL.createObjectURL(blob)
      elink.style.display = 'none'
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  }).finally(() => {
    loading.export = false
  })
}
const handleSizeChange = (val) => {
  formParams.value.pageSize = val
  getAll()
}
const handleCurrentChange = (val) => {
  formParams.value.page = val
  getAll()
}
// 查询
const search = () => {
  total.value = 1
  formParams.value.page = 1
  getAll()
}
// 加入黑名单
const addBlackList = (row) => {
  //  "ifBlack": "是否加入黑名单 1-是 0-否"
  ElMessageBox.confirm(
    `${
      row.ifBlack
        ? '确认是否取消黑名单'
        : '加入黑名单后，对方将无法登录商城'
    }`,
    `${row.ifBlack ? '取消黑名单' : '加入黑名单'}`,
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      customerBlacklist({
        buyerUserId: row.buyerUserId,
        ifBlack: row.ifBlack ? 0 : 1,
      }).then((res) => {
        if (res.code === '') {
          ElMessage.success('成功!')
          getAll()
        }
      })
    })
    .catch(() => {})
}
// 清除
const clear = () => {
  formParams.value = {
    name: '', // 用户昵称
    phone: '', // 手机号
    labelId: '', // 标签id
    dates: [], // 最近消费时间日期数组
    minMoney: '', // 累计消费金额最小值
    maxMoney: '', // 累计消费金额最大值
    minBuyers: '', // 购买次数最小值
    maxBuyers: '', // 购买次数最大值
    page: 1,
    pageSize: 10
  }
  getAll()
}
// 打标签
const makeTag = (id) => {
  checkList.value = []
  tipsForm.value.labelName = ''
  addFormDialog.value = true
  buyerUserId.value = id
}
const details = (row) => {
  // this.$router.push({
  //   name: 'customerDetails',
  //   params: { buyerUserId: row.buyerUserId, orderFormid: row.orderFormid }
  // })
  memberDetailsRef.value.getUser({
    buyerUserId: row.buyerUserId,
    orderFormid: row.orderFormid,
  })
}
// 初始化查询所有数据
function getAll () {
  loading.table = true
  customerMageGetAll(formParams.value).then(res => {
    tableData.value = res.data && res.data.list || []
    total.value = res.data && res.data.total || 0
  }).finally(() => {
    loading.table = false
  })
}
// 初始化查询所有标签
function getSelect (name) {
  getLabels(name).then(res => {
    tipsList.value = res.data || []
  })
}
const reset = () => {
  getAll()
}
</script>

<style lang="scss" scoped>
.custom_page {
  padding: 20px;
  margin-top: 20px;
  background-color: #FFFFFF;
}
.checkBoxStyle {
  margin-bottom: 20px;
}
</style>
